<template>
  <view>
    <view>
      <u-notice-bar :text="text1"></u-notice-bar>
    </view>
    
    <!-- 粘性布局 -->
    <u-sticky bgColor="#fff">
      <u-tabs :list="list1" @change="onTabChange"></u-tabs>
    </u-sticky>
      
    <!-- 图片展示 -->
    <view class="image-container">
      <view v-for="(group, index) in filteredImages" :key="index" class="image-group">
        <view v-for="(image, idx) in group" :key="idx" class="image-item">
          <image :src="image.src" mode="aspectFit" class="image"></image>
          <view class="image-info">
            <text>{{ image.name }}</text>
			<view class="price"><text>{{ image.price }}元</text></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      text1: '本市场的菜价为市场交易平均价，仅供参考!',
      list1: [
        { name: '全部' },
        { name: '肉类' },
        { name: '水果' },
        { name: '海鲜' },
        { name: '熟食' }
      ],
      images: {
        '全部': [
          [
            { src: 'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E4%B8%AD%E5%B1%B1/%E4%B8%89%E8%A7%92%E6%B2%99%E6%A0%8F%E9%B8%A1.gif', name: '三角沙栏鸡', price: 40 },
            { src: 'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E4%B8%AD%E5%B1%B1/%E4%B8%AD%E5%B1%B1%E6%9D%8F%E4%BB%81%E9%A5%BC.gif', name: '中山杏仁饼', price: 80 }
          ],
          [
            { src: 'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E4%B8%AD%E5%B1%B1/%E4%B8%AD%E5%B1%B1%E8%84%86%E8%82%89%E9%B2%A9.gif', name: '中山脆肉鲩', price: 120 },
            { src: 'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E4%B8%AD%E5%B1%B1/%E7%9F%B3%E5%B2%90%E9%B8%BD.gif', name: '石岐鸽', price: 160 }
          ],
          [
            { src: 'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E4%B8%AD%E5%B1%B1/%E7%A5%9E%E6%B9%BE%E8%8F%A0%E8%90%9D.gif', name: '神湾菠萝', price: 200 },
            { src: 'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E4%B8%AD%E5%B1%B1/%E9%BB%84%E5%9C%83%E8%85%8A%E5%91%B3.gif', name: '黄圃腊味', price: 240 }
          ],
          [
            { src: 'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E4%B8%AD%E5%B1%B1/%E7%A5%9E%E6%B9%BE%E8%8F%A0%E8%90%9D.gif', name: '南澳牡蛎', price: 280 },
            { src: 'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E4%B8%AD%E5%B1%B1/%E7%A5%9E%E6%B9%BE%E8%8F%A0%E8%90%9D.gif', name: '潮阳姜薯', price: 320 }
          ],
          [
            { src: 'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E4%B8%AD%E5%B1%B1/%E7%A5%9E%E6%B9%BE%E8%8F%A0%E8%90%9D.gif', name: '西胪乌酥杨梅', price: 360 },
            { src: 'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E4%B8%AD%E5%B1%B1/%E7%A5%9E%E6%B9%BE%E8%8F%A0%E8%90%9D.gif', name: '赤鲑鱼', price: 400 }
          ],
          [
            { src: 'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E4%B8%AD%E5%B1%B1/%E7%A5%9E%E6%B9%BE%E8%8F%A0%E8%90%9D.gif', name: '金玉三捻橄榄', price: 440 },
            { src: 'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E4%B8%AD%E5%B1%B1/%E7%A5%9E%E6%B9%BE%E8%8F%A0%E8%90%9D.gif', name: '黄花山龙眼', price: 480 }
          ]
        ],
        '肉类': [
          [
            { src: 'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E4%B8%AD%E5%B1%B1/%E4%B8%89%E8%A7%92%E6%B2%99%E6%A0%8F%E9%B8%A1.giff', name: '三角沙栏鸡', price: 40 }
          ],
          [
            { src: 'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E4%B8%AD%E5%B1%B1/%E7%9F%B3%E5%B2%90%E9%B8%BD.gif', name: '石岐鸽', price: 160 }
          ]
        ],
        '水果': [
          [
            { src: 'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E4%B8%AD%E5%B1%B1/%E7%A5%9E%E6%B9%BE%E8%8F%A0%E8%90%9D.gif', name: '神湾菠萝', price: 200 }
          ],
          [
            { src: 'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E4%B8%AD%E5%B1%B1/%E7%A5%9E%E6%B9%BE%E8%8F%A0%E8%90%9D.gif', name: '西胪乌酥杨梅', price: 360 }
          ],
          [
            { src: 'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E4%B8%AD%E5%B1%B1/%E7%A5%9E%E6%B9%BE%E8%8F%A0%E8%90%9D.gif', name: '金玉三捻橄榄', price: 440 }
          ],
          [
                        { src: 'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E4%B8%AD%E5%B1%B1/%E7%A5%9E%E6%B9%BE%E8%8F%A0%E8%90%9D.gif', name: '黄花山龙眼', price: 480 }
                      ]
                    ],
                    '海鲜': [
                      [
                        { src: 'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E4%B8%AD%E5%B1%B1/%E4%B8%AD%E5%B1%B1%E8%84%86%E8%82%89%E9%B2%A9.gif', name: '中山脆肉鲩', price: 120 }
                      ],
                      [
                        { src: 'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E4%B8%AD%E5%B1%B1/%E4%B8%AD%E5%B1%B1%E8%84%86%E8%82%89%E9%B2%A9.gif', name: '南澳牡蛎', price: 280 }
                      ],
                      [
                        { src: 'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E4%B8%AD%E5%B1%B1/%E4%B8%AD%E5%B1%B1%E8%84%86%E8%82%89%E9%B2%A9.gif', name: '赤鲑鱼', price: 400 }
                      ]
                    ],
                    '熟食': [
                      [
                        { src: 'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E4%B8%AD%E5%B1%B1/%E4%B8%AD%E5%B1%B1%E6%9D%8F%E4%BB%81%E9%A5%BC.gif', name: '中山杏仁饼', price: 80 }
                      ],
                      [
                        { src: 'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E4%B8%AD%E5%B1%B1/%E9%BB%84%E5%9C%83%E8%85%8A%E5%91%B3.gif', name: '黄圃腊味', price: 240 }
                      ]
                    ]
                  },
                  currentTab: '全部'
                }
              },
              computed: {
                filteredImages() {
                  return this.images[this.currentTab];
                }
              },
              methods: {
                onTabChange(e) {
                  this.currentTab = this.list1[e.index].name;
                }
              }
            }
            </script>
            
            <style>
            .image-container {
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              padding: 10rpx;
            }
            
            .image-group {
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              width: 49%;
              margin-bottom: 10rpx;
            }
            
            .image-item {
              width: 48%;
              margin-bottom: 10rpx;
              border: 1px solid #eee;
              border-radius: 10rpx;
              overflow: hidden;
            }
            
            .image {
              width: 100%;
              height: 200rpx;
            }
            
            .image-info {
              background-color: rgba(0, 0, 0, 0.5);
              color: #fff;
              padding: 5rpx;
              text-align: center;
            }
            
            .image-info text {
              font-size: 24rpx;
            }
			.price {
				font-size: 20rpx;
			}
            </style>

